import React from "react";
import GridWrapper from "../gridWrapper";
import HorizontalHistogramChart from "components/charts/weibo/horizontalHistogramChart";
import PieChart from "components/charts/weibo/pieChart";
import WordChart from "components/charts/wordChart";
import { compose, lifecycle, withStateHandlers } from "recompose";

import defaultApi from "utils/api/defaultApi";

import "assets/less/components/charts/computerChart.less";

// 布局位置
const layouts = {
  lg: [
    { i: "a", x: 0, y: 0, w: 9, h: 20, minH: 16, minW: 8 },
    { i: "b", x: 9, y: 0, w: 15, h: 20, minH: 16, minW: 7 },
    { i: "c", x: 0, y: 20, w: 24, h: 15, minH: 10, minW: 7 }
  ],
  md: [
    { i: "a", x: 0, y: 0, w: 10, h: 20, minH: 16, minW: 8 },
    { i: "b", x: 10, y: 0, w: 10, h: 20, minH: 16, minW: 7 },
    { i: "c", x: 0, y: 20, w: 20, h: 15, minH: 10, minW: 7 }
  ],
  sm: [
    { i: "a", x: 0, y: 0, w: 10, h: 20, minH: 16, minW: 8 },
    { i: "b", x: 10, y: 0, w: 6, h: 20, minH: 16, minW: 6 },
    { i: "c", x: 0, y: 20, w: 16, h: 15, minH: 10, minW: 6 }
  ]
};

const WeiboChart = ({ weiboHot }) => {
    const someWeiboHot = weiboHot.slice(0, 10);
  return (
    <GridWrapper className="computer-chart" layouts={layouts}>
      <HorizontalHistogramChart
        title="微博热搜榜"
        name="搜索次数"
        data={someWeiboHot}
      />
      <PieChart title="微博热搜占比" name="搜索次数" data={someWeiboHot} />
      <WordChart title="微博热搜词云图" name="搜索次数" rotationStep={30} data={weiboHot.map(item => ({name: item.title, value: item.hot}))} />
    </GridWrapper>
  );
};

export default compose(
  withStateHandlers(
    () => ({
      weiboHot: []
    }),
    {
      updateWeiboHot: () => ({ weiboHot }) => {
        return {
          weiboHot
        };
      }
    }
  ),
  lifecycle({
    componentDidMount() {
      const { updateWeiboHot } = this.props;

      defaultApi("/weibo/hot").then(weiboHot => {
        updateWeiboHot({ weiboHot });
      });
    }
  })
)(WeiboChart);
